*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    outline: none
}
.all{
    height: 500px;
    width:  800px;

    margin: 30px auto;
}
.left{
    position: relative;
    float: left;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    height:500px ;
    width: 200px;
    background: black;
    opacity:0.5;
}
.right{
    width:  100%;
    height: 500px;
    background: rgb(74, 153, 78)
}
.lefta{
    color: white;
    cursor: pointer;
    
}
.lefta:hover{
    background: orangered;
}
.leftb{
    position:absolute;
    width:600px ;
    height: 500px;
    background: yellow;
    left: 200px;
    top: 0;
   display: none
}
.left li:hover .leftb{
    display: block;
}
.zhong{
    height: 500px;
    width:  800px;
   
    margin: 0 auto;

}
.zhong li{

    height: 248px;
    width: 146px;
    border: 1px solid rgb(218, 211, 211);
    float: left;
    margin: 2px 5px;
    transition: 0.4s
    
}
.zhong li.zhong1:hover{
   transform: none;
   box-shadow: none
}
.zhong li.zhong1{
    height: 100%;
}

.zhong li:hover{
    box-shadow: 5px 5px 50px rgb(148, 146, 146);
    transform: translateY(-10px);
}
.lay{
    overflow: hidden;
    width: 100%;
    background: orangered;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 0px;
    transition: 0.5s;
}
.zhong li:hover .lay{
    height: 50px;
}

